<!-- 维修详情 -->
<template>
	<view class="no-warpper">
		<view class="nl-shadow-box">
			<view class="nl-flex-list">
				<text>报修编号</text>
				<view class="right-grey">{{objetInfo.repairId}}</view>
			</view>
			<view class="nl-flex-list">
				<text>报修类型</text>
				<view class="right-grey">{{objetInfo.repairTypeName}}</view>
			</view>
			<view class="nl-flex-list">
				<text>报修人</text>
				<view class="right-grey">{{objetInfo.repairName}}</view>
			</view>
			<view class="nl-flex-list">
				<text>联系方式</text>
				<view class="right-grey">{{objetInfo.tel}}</view>
				<view class="button-mini line m8" @click="callPhone(objetInfo.tel)">
					<button>拨打</button>
				</view>
			</view>
			<view class="nl-flex-list">
				<text>报修位置</text>
				<view class="right-grey">{{objetInfo.repairObjName}}</view>
			</view>
			<view class="nl-flex-list">
				<text>预约时间</text>
				<view class="right-grey">{{objetInfo.appointmentTime}}</view>
			</view>
			<view class="nl-flex-list">
				<text>状态</text>
				<view class="right-grey">{{objetInfo.stateName}}</view>
			</view>
			<view class="nl-flex-list">
				<text>报修内容</text>
				<view class="right-grey">{{objetInfo.context}}</view>
			</view>
		</view>
		<!-- 工单详情列表 -->
		<timeline :lineList="audits"></timeline>
		<u-modal v-model="modalShow" @confirm="modalConfirm" content='是否拨打电话？' show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	import {
		listRepairStaffs,
		getListOwnerRepairs
	} from 'api/repair';
	import {
		mapState
	} from 'vuex';
	export default {
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log('repairId', option.repairId)
			this.repairId = option.repairId
			this.getListOwnerRepairs()
		},
		data() {
			return {
				objetInfo: {},
				audits: [],
				repairId: '',
				modalShow:false,
				phone:''
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		methods: {
			/**
			 * 获取维修工单进度
			 */
			listRepairStaffs() {
				var that = this
				const data = {
					repairId: this.repairId,
					communityId: this.userCommunity.communityId,
					page: 1,
					row: 50
				}
				listRepairStaffs(data).then((res) => {
					console.log('获取维修进度', res)
					if (res.code == 0) {

						let startTimes = []
						let endTimes = []
						for (let i = 0; i < res.data.length; i++) {
							startTimes.push(res.data[i].startTime)
							endTimes.push(res.data[i].endTime)
							res.data[i].startDate = startTimes[i].split(' ')[0]
							res.data[i].startTime = startTimes[i].split(' ')[1].slice(0, startTimes[i].split(' ')[
								1].lastIndexOf(':'))
							console.log()
							if (endTimes[i] != undefined) {
								res.data[i].endDate = endTimes[i].split(' ')[0]
								res.data[i].endTime = endTimes[i].split(' ')[1].slice(0, endTimes[i].split(' ')[1]
									.lastIndexOf(':'))
							} else {
								res.data[i].endDate = ''
								res.data[i].endTime = ''
							}
						}
						that.audits = res.data
						console.log('处理之后', that.audits)
					}
				})
			},
			/**
			 * 获取维修待办详情
			 */
			getListOwnerRepairs() {
				var that = this
				const data = {
					storeId: this.userInfo.storeId,
					communityId: '',
					repairId: this.repairId,
					page: 1,
					row: 1
				}
				getListOwnerRepairs(data).then((res) => {
					console.log('获取维修详情', res)
					if (res.code == 0) {
						that.objetInfo = res.data[0]
						that.listRepairStaffs()
					}
				})
			},
			/**
			 * 拨打电话
			 */
			callPhone(link){
				this.modalShow = true
				this.phone = link
			},
			modalConfirm(){
				uni.makePhoneCall({
					phoneNumber: this.phone
				});
			}

		}
	}
</script>

<style lang="scss">
	.nl-flex-list {
		text {
			width: 120rpx;
			display: block;
			text-align-last: justify;
		}
		.tel-color{
			color: #1585FC;
		}
	}

	.nl-flex-list:last-child {
		align-items: flex-start;
		margin-bottom: 0;

		text {
			height: 100rpx;
			line-height: 100rpx;
		}

		.right-grey {
			padding: 32rpx 0;
		}
	}
</style>
